
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <style>
    .log_sel {
      width: 100%;
      font-family: monospace;
      font-size: 8pt;
    }

    .hint {
      width: 100%;
      font-family: monospace;
      font-size: 8pt;
    }

    .hint_addr {
      width: 20%;
      font-family: monospace;
    }

    .log_item_type_none {
      background-color: #aaa;
    }

    .log_area {
      border: 1px solid #eee;
      border-radius: 0px 0px 0px 0px;
    }

    .log_area_unavailable {
      background-color: #ccc;
    }

    .log_area_used {
      background-color: #0f0;
      border-top: 1px solid #444;
      border-bottom: 1px solid #444;
      border-left: none;
      border-right: none;
    }

    .log_area_used_begin {
      border-left: 1px solid #444;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .log_area_used_end {
      border-right: 1px solid #444;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .log_area_used_adj_bottom {
      border-bottom: none;
    }

    .log_area_used_adj_top {
      border-top: none;
    }

    .log_area_shim {
      background-color: #080;
    }

    .log_area_highlighted {
      background-color: #ff0;
    }

    .fullborder {
      border: 1px solid black;
    }

    .const_input {
      width: 70px;
    }

    #chart {
      border: 1px solid black;
    }
  </style>

  <body>
    <p>
      <input type="button" id="connect-btn" value="Connect to">&nbsp;<input type="text" id="server-addr" value="localhost:8910"> | <input type="file" id="file-input" />
    </p>

    <p>
      <b>Total stat:</b>
      max heap usage, bytes:
      <button id="max_heap_usage">&nbsp;</button>
      |
      max heap usage with overhead, bytes:
      <button id="max_heap_usage_with_overhead">&nbsp;</button>
      |
      max alloc count:
      <button id="max_alloc_cnt">&nbsp;</button>
      |
      min free block size:
      <button id="min_contiguous_block_size">&nbsp;</button>

      <div style="width: 1280px; height: 200px"><canvas id="chart" style="height: 100%; width: 100%"></canvas></div>
    </p>

    <p>
      <select id="log_sel" class="log_sel" size=10>
      </select>
    </p>

    <p>
      <b>Current stat:</b>
      heap usage, bytes: <input type="text" id="cur_heap_usage" class="const_input" disabled>
      heap usage with overhead, bytes: <input type="text" id="cur_heap_usage_with_overhead" class="const_input" disabled>
      alloc count: <input type="text" id="cur_alloc_cnt" class="const_input" disabled>
      max free block size, bytes: <input type="text" id="cur_max_free_block_size" class="const_input" disabled>
    </p>

    <p>
      <table id="map_tbl"></table>
    </p>

    <p>
      <textarea id="hint_input" class="hint" readonly></textarea>
      <input id="hint_addr_input" class="hint_addr" readonly />
    </p>

    <p>
      heap start (hex): <input type="text" id="heap_start" class="const_input" disabled>
      heap end (hex): <input type="text" id="heap_end" class="const_input" disabled>
      heap size: <input type="text" id="heap_size" class="const_input" disabled>
      bytes per row: <input type="text" id="bytes_per_row" class="const_input" disabled>
      bytes per cell: <input type="text" id="bytes_per_cell" class="const_input" disabled>
    </p>
    <p>
      malloc through our shim: <span class="log_area_shim fullborder">&nbsp;&nbsp;</span>
      malloc without shim: <span class="log_area_used fullborder">&nbsp;&nbsp;</span>
    </p>

  </body>

  <script src="jquery-1.12.0.min.js"></script>
  <script src="Chart-2.4.0.min.js"></script>
  <script src="heaplog_viewer.js"></script>
</html>

